<template lang="pug">
.miBox-wrap
  .miBoxHeader
    .headerLadel
      img(:src="list.cover", alt="alt")
      span {{ list.name }}
    img(src="../../src/assets/img/diandian.png", alt="alt")

  .miBoxMain
    p {{list.title}}
    img(
      v-for="d in list.src",
      v-if="list.type == 'img'",
      :src="d",
      alt="alt"
    )

    video(
      v-else,
      url="https://video.m.mi.com/e2d887885a624427690db85321fbb39b/1630324325/common/7c050b87ea0dbae45af0fa3520c72295.mp4",
      controls
    )

    span.btChaled {{list.titleType}}
    .footerTitle
      p 小米客服：
        span 11111111111111111111111111
</template>
<script>
export default {
  props: ["list"],
  data() {
    return {};
  },
};
</script>
<style lang="sass" scoped>
video
  width: 100%
  margin: .05rem 0
  border-radius: .06rem
.miBox-wrap
  width: 100%
  &:first-child
    margin-top: .5rem
  .miBoxHeader
    width: 100%
    height: .5rem
    display: flex
    justify-content: space-between
    align-items: center
    .headerLadel
      width: 1.2rem
      display: flex
      justify-content: space-between
      align-items: center
      img
        width: .4rem
        height: .4rem
        margin-left: .15rem
        border-radius: .5rem
      span
        font-size: .13rem
        width: .6rem
        padding: .2rem 0
    img
      width: .25rem
      height: .25rem
      margin-right: .1rem
  .miBoxMain
    width: 100%
    box-sizing: border-box
    padding: .15rem
    padding-bottom: 0
    img
      width: 100%
      max-height: 140vw
      margin-bottom: .1rem
      border-radius: .07rem
    p
      text-overflow: -o-ellipsis-lastline
      overflow: hidden
      text-overflow: ellipsis
      display: -webkit-box
      -webkit-line-clamp: 2
      line-clamp: 2
      -webkit-box-orient: vertical
      margin-bottom: .1rem
    .btChaled
      font-size: .14rem
      padding: .04rem .1rem
      border-radius: .06rem
      background: rgba(100,100,100,.1)
    .footerTitle
      width: 100%
      height: .5rem
      background: rgba(100,100,100,.1)
      display: flex
      align-items: center
      margin-top: .1rem
      box-sizing: border-box
      padding: 0 .1rem
      border-radius: .08rem
      p
        width: 100%
        height: .45rem
        line-height: .55rem
        font-size: .14rem
</style>
